@babel/traverse

What is @babel/traverse?

The @babel/traverse package is part of the Babel toolchain and is used for traversing and manipulating the abstract syntax tree (AST) generated by Babel. It provides methods to visit nodes in the tree, update them, add or remove nodes, and perform various transformations on the code represented by the AST.

What are @babel/traverse's main functionalities?

Visiting Nodes

This feature allows you to visit specific nodes in the AST. You can specify the types of nodes you're interested in and provide functions that will be called when those nodes are encountered during traversal.

{"type": "Identifier", "name": "a"}

Modifying Nodes

With @babel/traverse, you can modify nodes in the AST. This can include changing node types, adding or removing properties, or even replacing a node with a different one.

{"type": "Identifier", "name": "b"}

Adding and Removing Nodes

This feature allows you to add new nodes to the AST or remove existing ones. This is useful for code transformations where you need to introduce new variables, functions, or other constructs, or clean up unused code.

{"type": "VariableDeclaration", "declarations": [{"type": "VariableDeclarator", "id": {"type": "Identifier", "name": "c"}, "init": {"type": "Literal", "value": 3, "raw": "3"}}], "kind": "const"}

Scope Management

The package provides utilities for managing scope within the AST. This includes tracking variable declarations, bindings, and references, which is crucial for correctly transforming code without introducing errors.

{"type": "BlockStatement", "body": [], "directives": []}

Other packages similar to @babel/traverse

estraverse

Estraverse is a simple and flexible library for traversing and manipulating JavaScript ASTs. It is similar to @babel/traverse but is not tied to the Babel ecosystem and can be used with other ASTs conforming to the ESTree spec.

acorn-walk

Acorn-walk is a small module for walking the AST generated by the Acorn parser. It provides a simple interface for visiting nodes but does not offer the same level of manipulation capabilities as @babel/traverse.

recast

Recast provides AST traversal and manipulation capabilities, with a focus on preserving the original formatting of the code as much as possible. It uses esprima or babel as the parser and is more focused on code printing than @babel/traverse.

README

@babel/traverse

The Babel Traverse module maintains the overall tree state, and is responsible for replacing, removing, and adding nodes

See our website @babel/traverse for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/traverse

or using yarn:

yarn add @babel/traverse --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)